<template>
  <div class="box">
    <div class="nav">
      <van-nav-bar title="全部活动" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="main">
      <div class="type">
        <div class="type-l" :class="{ active: num === 1 }" @click="change(1)">
          <p>线下活动</p>
          <span :class="{ span: num === 1 }"></span>
        </div>
        <div class="type-r" :class="{ active: num === 2 }" @click="change(2)">
          <p>线上活动</p>
          <span :class="{ span: num === 2 }"></span>
        </div>
      </div>
      <div class="choose">
        <p class="city" :class="{ active1: num1 === 1 }" @click="change1(1)">
          <img
            :src="require('../../public/xianxiahuod/xxhd-2.png')"
            alt=""
          />杭州市
        </p>
        <p class="time" :class="{ active1: num1 === 2 }" @click="change1(2)">
          <img :src="require('../../public/xianxiahuod/xxhd-3.png')" alt="" />{{
            name
          }}<img :src="require('../../public/xianxiahuod/xxhd-4.png')" alt="" />
        </p>
        <p class="theme" :class="{ active1: num1 === 3 }" @click="change1(3)">
          <img
            :src="require('../../public/xianxiahuod/xxhd-27.png')"
            alt=""
          />按主题筛选<img
            :src="require('../../public/xianxiahuod/xxhd-4.png')"
            alt=""
          />
        </p>
      </div>
      <div class="time1" :class="{ show: num1 === 2 }">
        <p>时间</p>
        <div class="mid">
          <span
            v-for="(item, index) in timelist"
            :key="index"
            :class="{ active2: num2 === index }"
            @click="change2(index, item)"
            >{{ item }}</span
          >
        </div>
        <div class="bot">
          <span class="a1" @click="change2(0)">重置</span>
          <span class="a2" @click="jump">确定</span>
        </div>
      </div>
      <div class="list">
        <div class="list1" v-for="obj in state.activityList" :key="obj._id">
          <div class="list-l"><img :src="obj.url" alt="" /></div>
          <div class="list-r">
            <h5>{{ obj.title }}</h5>
            <div class="score">
              <span>{{ obj.score }} 分</span>
              <img :src="require('../../public/xxhd-24.png')" alt="" />
            </div>
            <div class="msg">
              <span class="date">{{ obj.date }}</span>
              <span class="area"
                ><img
                  :src="require('../../public/xianxiahuod/xxhd-2.png')"
                  alt=""
                />{{ obj.area }}</span
              >
            </div>
            <p class="price">{{ obj.price }}</p>
          </div>
        </div>
      </div>
      <div class="over">
        <p class="jiazai">已经全部加载完毕</p>
      </div>
    </div>
    <div class="footer">
      <van-tabbar
        v-model="active"
        active-color="#333333"
        inactive-color="#999999"
      >
        <van-tabbar-item :icon="require('../../public/xianxiahuod/xxhd-23.png')"
          >全部活动</van-tabbar-item
        >
        <van-tabbar-item :icon="require('../../public/xianxiahuod/xxhd-24.png')"
          >我的活动</van-tabbar-item
        >
      </van-tabbar>
    </div>
    <div class="cloth" :class="{ show1: num1 === 2 }"></div>
  </div>
</template>

<script>
import { ref, reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { getActivityApi } from "../utils/api";
export default {
  setup() {
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    const active = ref(0);
    const num = ref(1);
    const num1 = ref(0);
    const num2 = ref(0);
    const name1 = ref("");
    const name = ref("按时间筛选");
    const state = reactive({
      activityList: [],
      activityList1: [],
    });
    const timelist = [
      "不限",
      "今天",
      "明天",
      "本周末",
      "本周内",
      "本月内",
      "自定义日期",
    ];
    const jump = () => {
      router.push("/activity");
      num1.value = 0;
      name.value = name1.value;
      if (name.value === "今天") {
        state.activityList = state.activityList1;
        state.activityList = state.activityList.filter((item) => {
          return item.date === "07.22";
        });
      } else if (name.value === "明天") {
        state.activityList = state.activityList1;
        state.activityList = state.activityList.filter((item) => {
          return item.date === "07.23";
        });
      } else {
        state.activityList = state.activityList1;
      }
    };
    const change = (i) => {
      num.value = i;
    };
    const change1 = (i) => {
      num1.value = i;
    };
    const change2 = (i, a) => {
      num2.value = i;
      name1.value = a;
    };
    onBeforeMount(async () => {
      const res = await getActivityApi();
      state.activityList = res.data.result;
      state.activityList1 = res.data.result;
    });
    return {
      onClickLeft,
      active,
      num,
      num1,
      change,
      change1,
      timelist,
      num2,
      change2,
      jump,
      state,
      name,
      name1,
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    .van-nav-bar {
      /deep/.van-icon {
        color: #333;
      }
    }
  }
  .main {
    background: #fff;
    position: absolute;
    top: 46px;
    width: 100%;
    .type {
      height: 35px;
      width: 100%;
      display: flex;
      font-size: 14px;
      position: fixed;
      top: 46px;
      z-index: 100;
      background: #fff;
      padding: 0 16px;
      .type-l {
        position: relative;
        height: 35px;
        p {
          line-height: 35px;
        }
      }
      .span {
        display: inline-block;
        width: 20px;
        height: 5px;
        background: #ffd005;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
      }
      .active {
        font-size: 16px;
        font-weight: 800;
      }
      .type-r {
        position: relative;
        margin-left: 22px;
        height: 35px;
        p {
          line-height: 35px;
        }
      }
    }
    .choose {
      height: 27px;
      width: 100%;
      display: flex;
      font-size: 12px;
      text-align: center;
      position: fixed;
      top: 80px;
      z-index: 100;
      background: #fff;
      padding: 0 16px;
      .city {
        height: 27px;
        line-height: 27px;
        img {
          vertical-align: middle;
          margin-right: 5px;
        }
      }
      .time {
        margin-left: 16px;
        width: 120px;
        height: 27px;
        line-height: 27px;
        img {
          vertical-align: middle;
          margin: 0 5px;
        }
      }
      .theme {
        margin-left: 16px;
        height: 27px;
        line-height: 27px;
        img {
          vertical-align: middle;
          margin: 0 5px;
        }
      }
      .active1 {
        background: #f7f7f7;
        border-radius: 20px;
      }
    }
    .time1 {
      padding-left: 16px;
      padding-top: 10px;
      padding-right: 23px;
      padding-bottom: 12px;
      display: none;
      position: fixed;
      top: 108px;
      background: #fff;
      z-index: 500;
      p {
        font-size: 13px;
        color: #333;
      }
      .mid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        span {
          display: inline-block;
          width: 108.5px;
          height: 32.5px;
          font-size: 11.5px;
          text-align: center;
          line-height: 32.5px;
          border-radius: 5px;
          border: 1px solid #ebebeb;
          margin-top: 10px;
        }
        .active2 {
          border: 1px solid #e0d74d;
        }
      }
      .bot {
        margin-top: 30px;
        display: flex;
        text-align: center;
        line-height: 33.5px;
        justify-content: space-between;
        .a1 {
          display: inline-block;
          width: 110px;
          height: 33.5px;
          border: 1px solid #e0d74d;
          border-radius: 18px;
          font-size: 12px;
        }
        .a2 {
          display: inline-block;
          width: 215px;
          height: 35.5px;
          border-radius: 18px;
          background: #fdd303;
          font-size: 12px;
        }
      }
    }
    .list {
      margin-top: 46px;
      .list1 {
        padding: 0 16px;
        display: flex;
        padding-top: 28px;
        justify-content: space-between;
        .list-l {
          img {
            display: inline-block;
            width: 152px;
            height: 115px;
          }
        }
        .list-r {
          width: 175px;
          height: 115px;
          position: relative;
          h5 {
            font-size: 15px;
            color: #333;
            font-weight: 800;
            line-height: 20px;
          }
          .score {
            margin-top: 8px;
            span {
              font-size: 12px;
              color: #ffd300;
              vertical-align: middle;
              margin-right: 7px;
            }
            img {
              vertical-align: middle;
            }
          }
          .msg {
            margin-top: 10px;
            font-size: 12px;
            color: #666;
            .date {
              margin-right: 20px;
            }
            .area {
              vertical-align: middle;
              img {
                vertical-align: middle;
                margin-right: 5px;
              }
            }
          }
          .price {
            font-size: 16px;
            color: #eb4c50;
            position: absolute;
            bottom: 5px;
          }
          .over {
            height: 50px;
            width: 100%;
            font-size: 14px;
            color: #333;
            text-align: center;
          }
        }
      }
    }
    .over {
      height: 100px;
      text-align: center;
      line-height: 50px;
      .jizai {
        font-size: 14px;
        color: #333;
      }
    }
    .show {
      display: block;
    }
  }
  .footer {
    position: absolute;
  }
  .cloth {
    display: none;
    background: #aeaeae;
    opacity: 0.5;
    width: 100%;
    height: 1476px;
    position: absolute;
    top: 335px;
    z-index: 99;
  }
  .show1 {
    display: block;
  }
}
</style>
